<template>
  <div class="demo">
    <div class="demo-title">通知事项日历</div>
    <div class="demo-content">
      <Calendar v-model:value="value">
        <template #dateCellRender="{ current }">
          <ul class="events">
            <li v-for="item in getListData(current)" :key="item.content">
              <Badge :status="item.type" :text="item.content" />
            </li>
          </ul>
        </template>
        <template #monthCellRender="{ current }">
          <div v-if="getMonthData(current)" class="notes-month">
            <section>{{ getMonthData(current) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </Calendar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import Badge from '@sscd/badge';
  import Calendar from '@sscd/calendar';
  const value = ref<Dayjs>();
  const getListData = (val: Dayjs) => {
    let listData;
    switch (val.date()) {
      case 8:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
        ];
        break;
      case 10:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
          { type: 'error', content: 'This is error event.' },
        ];
        break;
      case 15:
        listData = [
          { type: 'warning', content: 'This is warning event' },
          { type: 'success', content: 'This is very long usual event。。....' },
          { type: 'error', content: 'This is error event 1.' },
          { type: 'error', content: 'This is error event 2.' },
          { type: 'error', content: 'This is error event 3.' },
          { type: 'error', content: 'This is error event 4.' },
        ];
        break;
      default:
    }
    return listData || [];
  };
  const getMonthData = (val: Dayjs) => {
    if (val.month() === 8) {
      return 1394;
    }
    return undefined;
  };
</script>

<style lang="less" scoped>
  .events {
    list-style: none;
    margin: 0;
    padding: 0;
    .ant-badge-status {
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      text-overflow: ellipsis;
      font-size: 12px;
    }
  }
  .notes-month {
    text-align: center;
    font-size: 28px;
  }
  .notes-month section {
    font-size: 28px;
  }
</style>
